<template>
	<view class="content">
		<view class="item">
			<view class="label"><uni-icons type="contact" size="30"></uni-icons></view>
			<input type="number" :value="mobile" @input="getMobile" placeholder="请输入手机号" />
		</view>
		<view class="item">
			<view class="label"><uni-icons type="contact" size="30"></uni-icons></view>
			<input type="text" :value="code" @input="getCode" placeholder="请输入验证码" />
			<view class="codeBtn" v-if="flag" @click="setTime">{{ codeText }}</view>
			<view class="codeBtn" style="background-color: #e1e1e1;color: #a7a7a7;" v-else>{{ codeText }}</view>
		</view>
		<view class="login" @click="login">登录</view>
		<view class=""></view>
		<!-- 		<view class="regs">
			<text class="no">忘记密码?</text>
			<text> | </text>
			<text class="no">现在注册></text>
		</view> -->
	</view>
</template>

<script>
let countDown = 60
export default {
	data() {
		return {
			mobile: '',
			code: '',
			codeText: '获取验证码',
			flag: true //验证码按钮是否可点击
		}
	},
	onLoad() {},
	onShow() {},
	methods: {
		getMobile(e) {
			this.mobile = e.detail.value.trim()
		},
		getCode(e) {
			this.mobile = e.detail.value.trim()
		},
		setTime() {
			//验证码计时
			this.flag = false
			if (countDown == 0) {
				this.flag = true
				this.codeText = '获取验证码'
				countDown = 60
			} else {
				this.codeText = '重新发送(' + countDown + 's)'
				countDown--
				setTimeout(() => {
					this.setTime()
				}, 1000)
			}
		},
		login(e) {
			if (!this.mobile) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				return
			} else if (this.mobile) {
			}
		}
	}
}
</script>

<style lang="scss">
.content {
	width: 100%;
	height: 100vh;
	display: flex;
	background-image: url(../../static/loginBg.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	flex-direction: column;
	padding: 500rpx 100rpx 0;

	.item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 50rpx 0 0;
		border-bottom: 1px solid $mainColor;

		.label {
			width: 70rpx;
		}

		input {
			width: 290rpx;
			padding: 10rpx;
		}

		.codeBtn {
			width: 180rpx;
			background-color: $mainColor;
			color: #fff;
			padding: 10rpx 5rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
			text-align: center;
		}
	}

	.login {
		margin-top: 150rpx;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		background-color: $mainColor;
		border-radius: 40rpx;
		box-shadow: 0px 0px 18rpx $mainColor;
	}

	.regs {
		padding-top: 100rpx;
		text-align: center;
		font-size: 30rpx;

		text {
			display: inline-block;
			padding: 15rpx;
		}

		.no {
			color: $mainColor;
		}
	}
}
</style>
